<template>
  <div>
    <div>
      <el-table
        border
        ref="multipleTable"
        :data="toApplyData"
        tooltip-effect="dark"
        style="width: 100%;cursor: pointer"
      >
        <el-table-column
          prop="roomName"
          label="会议室"
        >
        </el-table-column>
        <el-table-column
          prop="roomStatus"
          label="申请状态"
        >
          <template slot-scope="scope">
            <el-tag :type="scope.row.roomStatus === 1 ? 'success' : 'warning'">
              {{ scope.row.roomStatus === 1 ? '已预约' : '待审批'}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="depName"
          label="所属部门"
        >
        </el-table-column>
        <el-table-column
          prop="roomTime"
          label="申请时段"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.roomTime === 1">
              10:00 ~ 12:00
            </div>
            <div v-if="scope.row.roomTime === 2">
              14:00 ~ 16:00
            </div>
            <div v-if="scope.row.roomTime === 3">
              17:00 ~ 19:00
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="applyDate"
          label="预约日期"
        >
        </el-table-column>
        <el-table-column
          prop="checkTime"
          label="审批时间"
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
        >
        </el-table-column>
        、<el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="accept(scope.$index, scope.row)">同意</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="refuse(scope.$index, scope.row)">拒绝</el-button>
        </template>
      </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import roomAPI from "../../../api/room";
export default {
  name: "ToApply",
  data() {
    return {
      toApplyData:[],
      acceptData:{}
    }
  },
  methods:{
    getData(){
      this.needApplyData()
    },
    needApplyData(){
      roomAPI.needApplyData().then(res => {
        if (res){
          this.toApplyData = res.data.obj
        }
      })
    },
    accept(index, row){
      row.checkStatus = 1 // 同意标识
      roomAPI.toApply(row).then(res => {
        if (res){
          this.getData()
        }
      })
    },
    refuse(index, row) {
      row.checkStatus = 2 // 拒绝标识
      roomAPI.toApply(row).then(res => {
        if (res){
          this.getData()
        }
      })
    }
  },
  mounted() {
    this.getData()
  }
}
</script>

<style scoped>

</style>
